<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>数据表格</title>
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
	<link href="./static/css/uikit.min.css" rel="stylesheet">
	<link rel="stylesheet" href="./static/css/app.css">
	<link rel="stylesheet" href="./static/css/weui.min.css">
	<script src="./static/js/libs/uikit.min.js"></script>
	<link href="./static/css/jsoneditor.min.css" rel="stylesheet" type="text/css">
	<script src="./static/js/libs/jsoneditor.min.js"></script>
</head>

<body data-weui-theme='light'>
	<div id="app" x-data="Manage">
		<!--菜单-->
		<nav class="uk-navbar-container bg-color pd-10 mg-0" uk-navbar="mode: click">
			<ul class="uk-navbar-nav">
				<li class="white"><a  @click="action='block'">首页</a></li>
				<li class="white"><a uk-toggle="target: #tables-offcanvas">数据表</a></li>
				<!-- <li>
				<a class="white" href="#">设置</a>
				<div class="uk-navbar-dropdown pd-10">
					<ul class="uk-nav uk-navbar-dropdown-nav">
						<li class="uk-active"><a href="#">二级菜单</a></li>
					</ul>
				</div>
			</li> -->
			</ul>
		</nav>
		<!-- 区块 -->
		<div id="block-list" class="pd-10" x-show="action=='block'">
			<div class="uk-child-width-1-2 uk-child-width-1-2@s uk-child-width-1-4@m uk-child-width-1-6@xl uk-grid-small" uk-grid>
				<template x-for="block in blocks">
					<div class="block-item" @click="clickBlock(block)">
						<div class="text-center radius-5" :style="'background-color:'+block.bg_color">
							<template x-if="block.type === 'count'">
								<div class="text-block pointer pd-tb-10" :style="'color:'+block.text_color">
									<h3 x-text="block.title" class="f-14 mg-b-5"></h3>
									<p x-text="block.content"  class="mg-0"></p>
								</div>
							</template>
						</div>
					</div>
				</template>
			</div>
		</div>
		<!--数据表配置-->
		<div class="mg-10" style="display: none;" x-show="table && action=='list_fields'"> 
			<div class="table-action f-14 pointer">
				<template x-for="_mode_ in modes">
					<span class="bg-dark pd-lr-10 white pd-tb-5 mg-r-5" x-text="_mode_" @click="switchMode(_mode_)"></span>
				</template>
				<span class="bg-red pd-lr-10 white pd-tb-5" x-text="'当前模式:'+mode" @click="customizeMode"></span>

				<span class="bg-color pd-lr-10 white pd-tb-5" @click="SaveConfig">保存</span>
			</div>
			<!--新增操作-->
			<ul class="uk-subnav uk-subnav-pill mg-l-20" id="table-tabs" uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">
				<li><a>字段配置</a></li>
				<li><a>其他配置</a></li>
			</ul>
			<!-- 这是内容项的容器 -->
			<ul class="uk-switcher uk-margin">
				
				<!--字段编辑-->
				<li class="uk-child-width-1-4@l uk-grid-small" uk-grid>
					<template x-for="field in fields">
						<div class="field">
							<div class="uk-card uk-card-default uk-card-body">
								<div class="field-name bg-color white">
									<span x-text="field.title"></span><span x-text="field.name"></span>
								</div>
								<div class="uk-margin f-12 pd-t-15">
									<span><input type="radio" data-type="pk" :checked="tableRow.pk==field.name?'checked':''" :value="field.name" @click="tableRow.pk=field.name;save()"></span><span class="label">主键</span>
									<span><input type="checkbox" data-type="list_fields" @change="check(field.name,'list_fields',$event)" :value="field.name" :name="'list_fields['+field.name+']'" :checked="isCheck('list_fields',field.name)"></span><span class="label">列表</span>
									<span><input type="checkbox" data-type="edit_fields" @change="check(field.name,'edit_fields',$event)" :name="'edit_fields['+field.name+']'" :value="field.name" :checked="isCheck('edit_fields',field.name)"></span><span class="label">编辑</span>
									<span><input type="checkbox" data-type="user_edit_fields" @change="check(field.name,'require_fields',$event)" :name="'require_fields['+field.name+']'" :value="field.name" :checked="isCheck('require_fields',field.name)"></span>
									<span class="label">必填</span>
									<span><input type="checkbox" data-type="search_fields" @change="check(field.name,'search_fields',$event)" :name="'search_fields['+field.name+']'" :value="field.name" :checked="isCheck('search_fields',field.name)"></span>
									<span class="label">筛选</span>
									<span><input type="checkbox" data-type="mini_fields" @change="check(field.name,'mini_fields',$event)" :name="'mini_fields['+field.name+']'" :value="field.name" :checked="isCheck('mini_fields',field.name)"></span>
									<span class="label">Mini</span>
								</div>
								<!--类型-->
								<div class="uk-margin">
									<select class="uk-select" :name="'field_options.'+field.name+'.type'" data-type="type" @change="select($event,$refs)">
										<template x-for="(e_type,e_index) in edit_types">
											<option :value="e_index" x-text="edit_types[e_index]" :selected="optionCheck(field.name,'type',e_index)"></option>
										</template>
									</select>
								</div>
								<!--参数回调方式-->
								<div class="uk-margin">
									<select class="uk-select" :name="'field_options.'+field.name+'.option_callback'" data-type="option_callback" @change="select($event,$refs)">
										<template x-for="(o_type,o_index) in option_types">
											<option :value="o_index" x-text="option_types[o_index]" :selected="optionCheck(field.name,'option_callback',o_index)"></option>
										</template>
									</select>
								</div>
								<!--编辑参数-->
								<div class="uk-margin">
									<textarea :ondblclick="'Manage.field=\''+field.name+'\';UIkit.offcanvas(\'#option-use\',{flip:true}).show();'" class="uk-textarea" placeholder="编辑参数:用于编辑时的参数配置,配合编辑参数使用" :name="'field_options.'+field.name+'.option_value'" :value="showValue(field.name,'option_value')" @change="changeOption(field.name,'option_value',$event,$el)"></textarea>
								</div>
								<!--校验类型-->
								<div class="uk-margin">
									<textarea class="uk-textarea verify" :name="'field_options.'+field.name+'.verify'" :value="showValue(field.name,'verify')" @change="changeOption(field.name,'verify',$event,$el)" placeholder="校验类型:双击选择或者填写正则表达式"></textarea>
								</div>
								<div class="uk-margin">
									<select class="uk-textarea" :name="'field_options.'+field.name+'.filter'" data-type="filter" @change="select($event,$refs)">
										<template x-for="(f_type,f_index) in filter_types">
											<option :value="f_index" x-text="filter_types[f_index]" :selected="optionCheck(field.name,'filter',f_index)"></option>
										</template>
									</select>
								</div>
								<!--placeholder提示词-->
								<div class="uk-margin">
									<textarea class="uk-textarea" :name="'field_options.'+field.name+'.placeholder'" :value="showValue(field.name,'placeholder')" @change="changeOption(field.name,'placeholder',$event,$el)" placeholder="placeholder提示词"></textarea>
								</div>
								<!--默认值-->
								<div class="uk-margin">
									<textarea class="uk-textarea" :name="'field_options.'+field.name+'.default_value'" :value="showValue(field.name,'default_value')" @change="changeOption(field.name,'default_value',$event,$el)" placeholder="默认值可以填回调函数或者值"></textarea>
								</div>
								<!--编辑条件-->
								<div class="uk-margin">
									<textarea class="uk-textarea" :name="'field_options.'+field.name+'.condition'" :value="showValue(field.name,'condition')" @change="changeOption(field.name,'condition',$event,$el)" placeholder="编辑条件"></textarea>
								</div>
							</div>
						</div>
					</template>
				</li>
				<li class="mg-10">
					<div class="uk-margin uk-card uk-card-default uk-card-body f-12">
						<div class="radio-item inline-block">
							<input type="radio" data-type="pk" name="can_create" id="can_create" :checked="tableRow.can_create==1?'checked':''" :value="1" @click="tableRow.can_create=!tableRow.can_create;save()"><label class="label" for="can_create">允许新增</label>
						</div>
						<div class="radio-item inline-block">
							<input type="radio" data-type="pk" name="auth" id="auth" :checked="tableRow.auth==1?'checked':''" :value="1" @click="tableRow.auth=!tableRow.auth;save()"><label class="label" for="auth">权限认证</label>
						</div> 
					</div>
					<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-grid uk-grid-small" uk-grid>
						<div class="sort-fields">
							<div class="uk-card uk-card-default uk-card-body">
								<h6>列表字段排序</h6>
								<ul id="sort-list-fields" x-sort="sort($item,$position,'#sort-list-fields','list_fields')">
									<template class="template" x-for="(lf,lfi) in tableRow.list_fields">
										<li x-sort:item="lf" :data-field="lf" class="pd-lr-15 radius-5 text-center bg-color white mg-5" x-text="lf"></li>
									</template>
								</ul>
							</div>
						</div>
						<div class="sort-fields">
							<div class="uk-card uk-card-default uk-card-body">
								<h6>编辑字段排序</h6>
								<ul id="sort-edit-fields" x-sort="sort($item,$position,'#sort-edit-fields','edit_fields')">
									<template class="template" x-for="(ef,efi) in tableRow.edit_fields" :key="efi">
										<li x-sort:item="ef" :data-field="ef" class="pd-lr-15 radius-5 text-center bg-color white mg-5" x-text="ef"></li>
									</template>
								</ul>
							</div>
						</div>
						<div class="sort-fields">
							<div class="uk-card uk-card-default uk-card-body">
								<h6>搜索字段排序</h6>
								<ul id="sort-search-fields" x-sort="sort($item,$position,'#sort-search-fields','search_fields')">
									<template class="template" x-for="(sf,sfi) in tableRow.search_fields" :key="sfi">
										<li x-sort:item="sf" :data-field="sf" class="pd-lr-15 radius-5 text-center bg-color white mg-5" x-text="sf"></li>
									</template>
								</ul>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!--数据列表-->
		<div id="data-list" style="display: none;" x-show="action=='data_list'"></div>
		<!--底部保存-->
		<div id="bottom" class="text-center bg-color color pd-tb-10" style="display: none;" x-show="table && action=='list_fields'">
			<a class="btn white" @click="action='list_fields'">字段配置</a>
			<a class="btn white" @click="ShowData">数据列表</a>
			<a class="btn white" @click="openSaveBlockModal">保存到区块</a>
		</div>

		<!-- 新增弹出框 -->
		<div id="save-block-modal" uk-modal>
			<div class="uk-modal-dialog uk-modal-body radius-5">
				<h2 class="uk-modal-title mb-5 f-22">保存到区块</h2>
				<form @submit.prevent="saveToBlock">
					<div class="uk-margin">
						<label class="uk-form-label">标题</label>
						<input class="uk-input" type="text" x-model="blockData.title" required>
					</div>
					<div class="uk-margin">
						<label class="uk-form-label">配置</label>
						<div id="jsoneditor" style="width: 100%; height: 200px;"></div>
					</div>
					<div class="uk-margin">
						<label class="uk-form-label">类型</label>
						<select class="uk-select" x-model="blockData.type">
							<option value="count">计数</option>
							<option value="chart">图表</option>
							<option value="list">列表</option>
						</select>
					</div>
					<div class="uk-margin uk-grid-small" uk-grid>
						<div class="uk-width-1-2@s">
							<label class="uk-form-label">背景颜色</label>
							<input class="uk-input" type="color" x-model="blockData.bg_color">
						</div>
						<div class="uk-width-1-2@s">
							<label class="uk-form-label">文字颜色</label>
							<input class="uk-input" type="color" x-model="blockData.text_color">
						</div>
					</div>
					<button class="uk-button uk-button-primary" type="submit">保存</button>
					<button class="uk-button uk-button-default uk-modal-close" type="button">取消</button>
				</form>
			</div>
		</div>

		<!--侧边表格-->
		<div id="tables-offcanvas" uk-offcanvas="mode: push; overlay: true">
			<div class="uk-offcanvas-bar no-scrollbar pd-10">
				<button class="uk-offcanvas-close" type="button" uk-close></button>
				<div class="tables">
					<div id="filter-table">
						<input type="text" class="uk-input bg-dark color uk-search-input" placeholder="搜索表名" x-model="filter_table">
					</div>
					<?php foreach ($data as $key => $item) { ?>
					<p :class="'f-14 pointer '+ (table=='<?= $key ?>'?'on':'')" @click="load('<?= $key ?>')" x-show="filter_table === '' || '<?= $key ?>'.toLowerCase().includes(filter_table.toLowerCase()) || '<?= $item ?>'.toLowerCase().includes(filter_table.toLowerCase())">
						<span class="name pd-l-10">
							<?= $item ?>
						</span> <span class="table">【
							<?= $key ?>】
						</span>
					</p>
					<?php } ?>
				</div>
			</div>
		</div>
		<!--选择参数方式的slider-->
		<div id="option-use" uk-offcanvas>
			<div class="uk-offcanvas-bar bg">
				<div class="uk-grid uk-grid-small uk-child-width-1-2@s pd-10" uk-grid>
					<div>
						<div class="uk-card uk-card-default uk-card-body" @click="tableRow.field_options[field]['option_value']='core_user|id,username,nickname,mobile|nickname|username,nickname,mobile|id \r\n 关联表|查询字段|显示字段|搜索字段|最终值字段';">
							关联表
						</div>
					</div>
					<div>
						<div class="uk-card uk-card-default uk-card-body" @click=tableRow.field_options[field]['option_value']='{"level":5,"all":true,"show":2,"default":"431322000000"}'>
							地区选择
						</div>
					</div>
					<div>
						<div class="uk-card uk-card-default uk-card-body" @click=tableRow.field_options[field]['option_value']="cms_category|id,pid,name|id|pid|name|type='shop'">
							树状分类
						</div>
					</div>
					<div>
						<div class="uk-card uk-card-default uk-card-body" @click=tableRow.field_options[field]['option_value']='{"attrs":{"a":"A"},"single":false}'>
							多属性
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="./static/js/libs/sort.min.js"></script>
	<script src="./static/js/libs/jquery.min.js"></script>
	<script src="./static/config.js"></script>
	<script src="./static/js/Manage.js"></script>
	<script src="./static/js/libs/alpinejs.js"></script>
</body>

</html>